import React from "react";
import styles from "../styles/pages/Home.module.css";
import { useEffect, useState } from "react";
import { Button } from "antd";

const Home = () => {
  const byWujie = window.__POWERED_BY_WUJIE__;
  const [subTitle, setSubTitle] = useState("默认的子应用标题");

  useEffect(() => {
    // 发送消息给主应用
    window.$wujie?.bus.$emit("changeTitle", "React子应用");

    // 监听主应用发送的消息
    window.$wujie?.bus.$on("changeSubTitle", (title) => {
      setSubTitle(title);
    });
  }, []);

  return (
    <div className={styles["home-container"]}>
      <h1>{subTitle}</h1>
      {byWujie ? <div>处于无界微前端</div> : <div>处于独立运行</div>}
      <Button type="primary">按钮</Button>
    </div>
  );
};

export default Home;
